<template>
  <el-tabs :tab-position="tabPosition">
    <el-tab-pane v-for="(item, index) in info" :key="index" :label="item.label">
      <div class="row row-cols-1 row-cols-lg-2">
        <div
          class="col my-2"
          v-for="(items, indexs) in item.imgSrc"
          :key="indexs"
        >
          <div
            class="position-relative"
            style="overflow: hidden; width:100%;height:100%; "
          >
            <img :src="items.img" alt="" />
            <div class="desc">{{ items.title }}</div>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data() {
    return {
      tabPosition: "top",
      info: [
        {
          label: "校园",
          imgSrc: [
            {
              title: "福州理工学院 | 咱们的校园",
              img:
                "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=211080032,171902254&fm=26&gp=0.jpg",
            },
            {
              title: "福州理工学院 | 校园景色",
              img:
                " https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=503215904,1949242253&fm=26&gp=0.jpg",
            },
          ],
        },
        {
          label: "操场",
          imgSrc: [
            {
              title: "福理校园 | 毕业季",
              img:
                "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3061500345,2570880117&fm=26&gp=0.jpg",
            },
            {
              title: "福理校园 | 国旗台",
              img:
                " https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4265116208,246638598&fm=26&gp=0.jpg",
            },
          ],
        },
        {
          label: "教学区",
          imgSrc: [
            {
              title: "福理校园 | 悠悠小路",
              img:
                "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2379199312,1997642796&fm=26&gp=0.jpg",
            },
            {
              title: "没想到，你是这样的福州理工学院 ",
              img:
                " https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1944473252,1141157316&fm=26&gp=0.jpg",
            },
          ],
        },
        {
          label: "休闲区",
          imgSrc: [
            {
              title: "福州理工学院|军训会操展风采 英姿飒爽致青春",
              img:
                "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2898184672,1684009300&fm=26&gp=0.jpg",
            },
            {
              title:
                "【学习强国】多彩校园 | 福州理工学院：校园的第一抹春色，来了！",
              img:
                " https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=603660732,91063293&fm=15&gp=0.jpg",
            },
          ],
        },
        {
          label: "活动",
          imgSrc: [
            {
              title: "福理校园 | 跆拳道",
              img:
                "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2308669197,1121925498&fm=26&gp=0.jpg",
            },
            {
              title: "福理校园 | 知名企业汇聚FIT ",
              img:
                " https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2756555755,4033703988&fm=11&gp=0.jpg",
            },
          ],
        },
        {
          label: "运动会",
          imgSrc: [
            {
              title: "福理校园 | 运动启动仪式",
              img:
                "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2894338602,2806389088&fm=26&gp=0.jpg",
            },
            {
              title: " 福州理工学院文化活动总汇 | 强势围观!",
              img:
                " https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1918008041,4050122427&fm=26&gp=0.jpg",
            },
          ],
        },
        {
          label: "餐厅",
          imgSrc: [
            {
              title: "福理校园 | 网红餐厅",
              img:
                "http://www.fit.edu.cn/images/up_images/20200311090008118.jpg",
            },
            {
              title: "福理校园 | 网红餐厅",
              img:
                " http://www.fit.edu.cn/images/up_images/20200311090008119.jpg",
            },
          ],
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.desc {
  margin-top: 30px;
  height: 70px;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 0 0 20px 20px;
  z-index: 3;
}
img:hover ~ .desc {
  top: 87%;
}
@media (max-width: 768px) {
  img:hover ~ .desc {
    top: 75%;
  }
}
</style>
